<template>
	<view class="showBox">
		<template v-for="(item,index) in shoplist" :key="index" >
			<view class="shopBox"  @click="showOne(item)">
				<img :src="item.imgSrc" class="shopImg" alt="">
				<view class="shopname fontsize">{{item.shopname}}</view>
				
				<view class="shoptext fontsize">
					<text class="orange">{{item.allPionts}}</text>
					积分
				</view>
			</view>
			<view class="shopBox" v-if="item.money!==0" @click="showTwo(item)">
				<img :src="item.imgSrc" class="shopImg" alt="">
				<view class="shopname fontsize">{{item.shopname}}</view>
				
				<view class="shoptext fontsize">
					<text  class="orange">{{item.piont}}</text>
					积分+
					<text class="orange">{{item.money}}</text>元
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			shoplist:[
				{
					id:1,
					imgSrc:"/static/shop-1.jpg",
					shopname:'玩具吉普',
					allPionts:298000,
					piont:180000,
					money:150,
				},
				{
					id:2,
					imgSrc:"/static/shop-2.jpg",
					shopname:'玩具挖土机',
					allPionts:298000,
					piont:180000,
					money:159,
				},
				{
					id:3,
					imgSrc:"/static/shop-1.jpg",
					shopname:'玩具奔驰',
					allPionts:298000,
					piont:180000,
					money:299,
				},
				{
					id:4,
					imgSrc:"/static/shop-2.jpg",
					shopname:'玩具宾利',
					allPionts:599000,
					piont:0,
					money:0,
				},
				{
					id:5,
					imgSrc:"/static/shop-2.jpg",
					shopname:'玩具法拉利',
					allPionts:998000,
					piont:188888,
					money:999,
				}
				
				]
			}
		},
		methods: {
			showOne(item){
				item={...item,type:1};
				// console.log(item);
				uni.navigateTo({
					url:'/uni_modules/shop-productDetails/components/shop-productDetails/shop-productDetails?item='+encodeURIComponent(JSON.stringify(item)),
				})
				
			},
			showTwo(item){
				item={...item,type:2};
				// console.log(item);
				uni.navigateTo({
					url:'/uni_modules/shop-productDetails/components/shop-productDetails/shop-productDetails?&item='+encodeURIComponent(JSON.stringify(item)),
				})
				
			}
		}
	}
</script>

<style scoped>
	.fontsize {
		font-size: 26rpx;
	}
	.showBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		width: 100%;
		padding: 2%;
	}

	.shopBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 46%;
		margin: 0 10rpx 20rpx 5rpx;
		height: 300rpx;
		border: 1px solid #e8e8e8;
	}
	.shopImg {
		width: 80%;
		height: 60%;
		margin: auto;
	}

	.shopname {
		text-align: center;
		padding: 10rpx;
		font-size: 14px;
		border-bottom: 1px solid #e8e8e8;
	}

	.shoptext {
		text-align: center;
	}
	.orange{
		color: #F5B43E;
		font-size: 28rpx;
	}
</style>

